<template>
    <div class="recent_word">
        <span class="recent_word_title">近七天工作情况</span>
        <div id="recent_curve" :style="{width: '250px', height: '120px'}"></div>
    </div>
</template>

<script>
    export default {
        name: 'recent_word',
        data(){
            return {
                "recent":[],
                "upload":[],
                "adopt":[],
                "reject":[],
                "wait":[]
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('recent_curve'))
                // 绘制图表
                myChart.setOption({
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '0%',
                        right: '10%',
                        top: '0%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.recent
                    },
                    yAxis: {
                        show:false
                    },
                    series: [
                        {
                            name:'提报',
                            type:'line',
                            lineStyle: {
                                color: '#00ffff'
                            },
                            itemStyle: {
                                color: '#00ffff',
                            },
                            data:this.upload
                        },
                        {
                            name:'审核通过',
                            type:'line',
                            lineStyle: {
                                color: '#3ff402'
                            },
                            itemStyle: {
                                color: '#3ff402',
                            },
                            data:this.adopt
                        },
                        {
                            name:'驳回',
                            type:'line',
                            lineStyle: {
                                color: '#ff3000'
                            },
                            itemStyle: {
                                color: '#ff3000',
                            },
                            data:this.reject
                        },
                        {
                            name:'待审核',
                            type:'line',
                            lineStyle: {
                                color: '#e57ffb'
                            },
                            itemStyle: {
                                color: '#e57ffb',
                            },
                            data:this.wait
                        }
                    ]
                });
            },
            getData(){
                this.$axios.get('http://sdkaohe.cn/api/report/data/recentWord')
                .then(response=>{
                    let recent_data = response.data.data
                    for( var i = 0; i < recent_data.length; i++){
                        let recent = response.data.data[i].recent;
                        this.recent.push(recent)
                        let upload = response.data.data[i].upload;
                        this.upload.push(upload)
                        let adopt = response.data.data[i].adopt;
                        this.adopt.push(adopt)
                        let reject = response.data.data[i].reject;
                        this.reject.push(reject)
                        let wait = response.data.data[i].wait;
                        this.wait.push(wait)
                    }
                    this.drawLine()
                })
                .catch(error=>{
                    console.log(error);
                    alert('网络错误，不能访问');
                })
            }
        }
    }
</script>

<style scoped>
    .recent_word{
        position: absolute;
        top: 885px;
        left: 1635px;
    }
    .recent_word_title{
        display: block;
        width: 200px;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        text-align: left;
        text-indent: 1em;
        color: #00ffff;
        background: url(../../assets/title_bg.png)
    }
    .recent_curve{
        width: 250px;
        height: 120px;
        background: #f00;
    }
</style>